<template>
  <div class="p-3  d-flex flex-column my-container">
    <div class="">
      <el-form :model="searchModel" :inline="true" class="d-flex justify-content-end">
        <el-form-item>
          <el-input v-model="searchModel.userName" :disabled="detailsDisabled" placeholder="请输入用户姓名"
                    prefix-icon="el-icon-search"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="mb-3">
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>
      <div class="col d-flex over-auto">
        <el-table v-loading="loading" border :data="tableData" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="50" align="center"/>
          <el-table-column prop="controlCode" label="控制编码" align="center"/>
          <el-table-column prop="controlName" label="控制名称" align="center"/>
          <el-table-column prop="controlLevel" label="控制级别" align="center"/>
          <el-table-column prop="isFirst" label="是否是业务系统等级" align="center">
            <template slot-scope="{ row }">
              <span v-if="row.isYeWu == 'Y'" style="color: #07c160;">是</span>
              <span v-else style="color: #f56c6c;">否</span>
            </template>
          </el-table-column>
          <!--          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>-->
          <!--          <el-table-column label="创建时间" align="center" prop="createTime" width="170">-->
          <!--            <template slot-scope="scope">-->
          <!--              {{ scope.row.createTime }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <!--          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>-->
          <!--          <el-table-column label="更新时间" align="center" prop="createTime" width="170">-->
          <!--            <template slot-scope="scope">-->
          <!--              {{ scope.row.updateTime }}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="mini" v-permission="'USER_EDIT'" @click="handlerEdit(row)">设置业务等级
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--      <pagination class="pagination" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"-->
      <!--                  @pagination="pagination"/>-->
    </div>

    <!-- 封装操作后弹框 -->
    <global-message v-if="isGlobalMessageShow" @receive="receive" :message="message"/>
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import {
    queryList,
    setServiceFlag
  } from "@/api/deviceControl/index"

  export default {
    components: {
      ycDialog
    },
    data() {
      return {
        isGlobalMessageShow: false,
        isGlobalMessageBoxShow: false,
        messageTitleDes: "",
        message: "",
        messageBoxSaveShow: false,
        userCode: "",
        userData: [],
        tableData: [],
        count: 0,
        pageIndex: 1,
        pageSize: 20,
        detailsDisabled: false, //详情 如果为true代表禁用状态
        searchModel: {
          userName: "",
          status: null //正常/停用状态（全部）
        },
        newAccountModel: {
          userName: "",
          roleName: "",
          accountPhone: "",
          id: 0,
          roleCode: ""
        },
        loading: false,
        centerTitle: "",
        rules: {
          userName: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }],
          roleCode: [{
            required: true,
            message: "请选择角色",
            trigger: "change"
          }],
          accountPhone: [{
            required: true,
            trigger: "blur",
            message: "请输入手机号码"
          }]
        }
      }
    },
    created() {
      this.getAccountData()
    },
    mounted() {
      this.userCode = sessionStorage.getItem("userCode")
    },
    methods: {
      /**
       * 获取表格方法
       */
      async getAccountData(pageIndex = 1, pageSize = 20, tableInfo) {
        this.loading = true
        if (tableInfo) {
          const {
            userName,
            status
          } = tableInfo
          const {
            object
          } = await queryList()
          this.tableData = object.data
          this.count = object.count
          this.loading = false
        } else {
          const {
            object
          } = await queryList({})
          this.tableData = object
          this.loading = false
        }
      },
      pagination(pageItem) {
        this.getAccountData(pageItem.page, pageItem.limit)
      },
      // 搜索按钮
      async searchClick() {
        this.getAccountData(1, 20, this.searchModel)
      },


      /**
       * 修改按钮
       */
      handlerEdit(row) {
        this.$confirm("是否设置业务等级, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          setServiceFlag({
            id: row.id
          }).then(res => {
            if(res.status == 200) {
              this.$message({
                type: "success",
                message: res.message
              })
              this.getAccountData()
            }
          })
        }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          })
        })
      },

      /**
       * 刷新
       */
      refresh() {
        this.searchModel = {
          userName: "",
          status: null
        }
        this.getAccountData()
      },

      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      },

      async messageBoxSave(show) {
        this.messageBoxSaveShow = show
      }
    }
  }
</script>

<style lang="scss" scoped>
  .status {
    display: inline-block;
    padding: 0 10px;
  }

  .title-container {
    display: flex;
    justify-content: flex-end;
    height: 60px;

    .search-content {
      margin-left: 20px;
      display: flex;
    }

    .addAccount {
      margin: 10px 20px;
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }

  .content {
    height: 600px;

    .drawer-title {
      font-weight: 400;
      font-size: 24px;
      color: #000000;
      text-align: center;
      padding: 36px 0;
    }

    .form {
      padding: 0 10px;
    }
  }

  .footer {
    height: 360px;
    display: flex;
    align-items: flex-end;
    // justify-content: st-end;
    padding: 5px 20px;
  }
</style>
